<script>
export default {
  name: 'report-person',
  props: {
    informer: {
      type: Object,
      default () {
        return {
          principal: '',
          informant: '',
          telephone: '',
          date: '',
        }
      }
    }
  },
  data () {
    return {
      handle: undefined,
      form: {
        principal: this.informer.principal,
        informant: this.informer.informant,
        telephone: this.informer.telephone,
        date: this.informer.date,
      }
    }
  },
  watch: {
    informer () {
      this.form.principal = this.informer.principal
      this.form.informant = this.informer.informant
      this.form.telephone = this.informer.telephone
      this.form.date = this.informer.date
    }
  },
  methods: {
    getData () {
      return {
        personInCharge: this.form.principal,
        informer: this.form.informant,
        telephone: this.form.telephone,
        fillInDate: this.form.date,
      }
    },
  },
  mounted () {
    this.handle = this.$refs.handle
  }
}
</script>

<template>
  <div class="report-person">
    <el-form inline :model="form">
      <el-form-item label="填报负责人">
        <el-input type="text" class="report-input" v-model="form.principal"></el-input>
      </el-form-item>
      <el-form-item label="填报人">
        <el-input type="text" class="report-input" v-model="form.informant"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input type="text" class="report-input" v-model="form.telephone"></el-input>
      </el-form-item>
      <el-form-item label="填报日期">
        <el-date-picker class="width-100" type="date" v-model="form.date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :clearable="false"></el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.report-person {
  margin-top: 10px;
  padding: 0 12px;
}
.report-person-head {
  padding: 10px 15px;
  background: #eee;
  text-align: center;
  font-size: 14px;
  cursor: move;
}
.report-person ::v-deep .el-form-item {
  margin-bottom: 0;
}
.report-person ::v-deep .el-input__inner {
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 0;
}
.report-person ::v-deep .el-form-item__label {
  font-size: 12px;
  text-align: left;
}
</style>
